<template>
  <div>App</div>
  <p>{{ goodInfo }}</p>
  <button @click="change">修改</button>

  <p>{{ person }}</p>
  <button @click="changePerson">按钮</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import { reactive, ref } from "vue";
// 使用reactive创建代理对象需要注意的是，如果我们直接替换这个值,则不具备任何的响应式
// 解决方法：我们可以创建这个数据的时候多嵌套一层结构，不去替换值,而是修改这个对象中某个属性值
let goodInfo = reactive({
  data: {
    skuId: 0,
    skuNum: 0,
    skuName: "",
  },
});

const change = () => {
  alert(1);

  // 直接替换后无法实现响应式
  const result = {
    skuId: 1,
    skuNum: 3,
    skuName: "Apple14",
  };
  goodInfo.data = result;
};

// 使用ref创建对象数据，可以直接被替换，并且具有响应式(因为ref对象的劫持就是监听ref对象的value的变化，而我们替换的本身就是value)
const person = ref({
  name: "",
  age: 0,
});
const changePerson = () => {
  const result = {
    name: "xiaowang",
    age: 19,
  };
  person.value = result;

  console.log(person);
};
</script>

<style scoped></style>
